<template>
	<view class="myLive">
		<view class="grid">
		    <view class="item" @tap="goUrl('/pagesB/my/live/plan')">
		      <text class="custom-icon custom-icon-jihua"></text>
		      <view class="title">直播计划</view>
		    </view>
		    <view class="item" @tap="goDetail('认购流程')">
		      <text class="custom-icon custom-icon-liucheng1"></text>
		      <view class="title">认证流程</view>
		    </view>
		    <view class="item" @tap="goDetail('直播流程')">
		      <text class="custom-icon custom-icon-liucheng"></text>
		      <view class="title">直播流程</view>
		    </view>
		  </view>
		
		  <view class="btnBox" @tap="goUrl('/pagesB/my/live/system')">
		    <button class="liveBtn">立即开播</button>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goUrl (url) {
				uni.navigateTo({
					url
				})
			},
			goDetail (title) {
				uni.navigateTo({
					url: '/pagesB/my/live/detail?title='+title
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.grid {
  border-top: 1rpx solid #eeeeee;
  border-left: 1rpx solid #eeeeee;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  .item {
    width: 33.33%;
    padding: 32rpx 0;
    box-sizing: border-box;
    border-right: 1rpx solid #eeeeee;
    border-bottom: 1rpx solid #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	.custom-icon {
	  font-size: 52rpx;
	}
	.title {
	  font-size: 28rpx;
	  color: #333333;
	  margin-top: 12rpx;
	}
  }
}

.custom-icon-jihua,
.custom-icon-huifang {
  color: #ff6302;
}
.custom-icon-setting {
  color: #ffb960;
}
.custom-icon-liucheng1,
.custom-icon-shangpin {
  color: #03bfbf;
}
.custom-icon-liucheng {
  color: #a545e2;
}

.btnBox {
  position: fixed;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  .liveBtn {
    background: var(--btnBgColor);
    color: #fff;
	font-weight: 600;
	width: 368rpx;
    border-radius: 80rpx;
  }
}
</style>
